<template>
  <div class="page-container">
    <!-- 顶部卡片 -->
    <a-card class="header-card">
      <div class="header-content">
        <h2 class="page-title">个人信息</h2>
        <div class="header-right">
          <a-button type="primary" @click="$router.back()">返回</a-button>
        </div>
      </div>
    </a-card>

    <!-- 个人信息卡片 -->
    <div class="profile-container">
      <a-row :gutter="16" class="card-row">
        <!-- 左侧个人信息卡片 -->
        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <a-card class="info-card">
            <div class="avatar-wrapper">
              <a-avatar :size="120">
                <template v-if="avatarUrl">
                  <img :src="avatarUrl" class="avatar-image" alt="avatar" />
                </template>
                <template v-else>小明</template>
              </a-avatar>
              <div class="upload-hover" @click="handleUploadClick">
                <camera-outlined />
                <div>更换头像</div>
              </div>
            </div>
            <div class="user-info">
              <h2>小明</h2>
              <p>软件工程</p>
              <p>学号：2021123456</p>
            </div>
            <a-divider />
            <div class="stats">
              <div class="stat-item">
                <div class="stat-value">12</div>
                <div class="stat-label">完成题目</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">5</div>
                <div class="stat-label">收藏题目</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">89%</div>
                <div class="stat-label">正确率</div>
              </div>
            </div>
            <!-- 添加隐藏的文件输入框 -->
            <input
              type="file"
              ref="fileInput"
              accept="image/*"
              style="display: none"
              @change="handleFileChange"
            />
          </a-card>
        </a-col>

        <!-- 右侧详细信息卡片 -->
        <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
          <a-card class="detail-card">
            <a-tabs>
              <!-- 基本信息 -->
              <a-tab-pane key="basic" tab="基本信息">
                <a-form :model="form" layout="horizontal">
                  <a-form-item label="学号/工号">
                    <a-input v-model:value="form.studentId" disabled />
                  </a-form-item>
                  <a-form-item label="姓名">
                    <a-input v-model:value="form.name" disabled />
                  </a-form-item>
                  <a-form-item label="角色">
                    <a-input v-model:value="form.role" disabled />
                  </a-form-item>
                  <a-form-item label="专业">
                    <a-input v-model:value="form.major" disabled />
                  </a-form-item>
                  <a-form-item label="邮箱">
                    <a-input v-model:value="form.email" />
                  </a-form-item>
                  <a-form-item label="手机">
                    <a-input v-model:value="form.phone" />
                  </a-form-item>
                  <a-form-item>
                    <a-button type="primary" @click="handleSave">保存修改</a-button>
                  </a-form-item>
                </a-form>
              </a-tab-pane>

              <!-- 安全设置 -->
              <a-tab-pane key="security" tab="安全设置">
                <a-list>
                  <a-list-item>
                    <a-list-item-meta title="账号密码" description="用于保护账号信息安全">
                      <template #avatar>
                        <lock-outlined />
                      </template>
                    </a-list-item-meta>
                    <template #extra>
                      <a-button type="link" @click="showChangePassword">修改密码</a-button>
                    </template>
                  </a-list-item>
                  <a-list-item>
                    <a-list-item-meta title="绑定手机" description="已绑定手机：138****8888">
                      <template #avatar>
                        <mobile-outlined />
                      </template>
                    </a-list-item-meta>
                    <template #extra>
                      <a-button type="link" @click="$router.push('/update-phone')">修改</a-button>
                    </template>
                  </a-list-item>
                  <a-list-item>
                    <a-list-item-meta title="绑定邮箱" description="已绑定邮箱：user@example.com">
                      <template #avatar>
                        <mail-outlined />
                      </template>
                    </a-list-item-meta>
                    <template #extra>
                      <a-button type="link" @click="$router.push('/update-email')">修改</a-button>
                    </template>
                  </a-list-item>
                </a-list>
              </a-tab-pane>
            </a-tabs>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>

  <!-- 修改密码对话框 -->
  <a-modal
    v-model:visible="passwordModal"
    title="修改密码"
    @ok="handlePasswordChange"
    :confirmLoading="confirmLoading"
    okText="确定"
    cancelText="取消"
  >
    <a-form :model="passwordForm" layout="horizontal" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="当前密码" required>
        <a-input-password v-model:value="passwordForm.oldPassword" />
      </a-form-item>
      <a-form-item label="新密码" required>
        <a-input-password v-model:value="passwordForm.newPassword" />
      </a-form-item>
      <a-form-item label="确认新密码" required>
        <a-input-password v-model:value="passwordForm.confirmPassword" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { 
  CameraOutlined, 
  LockOutlined, 
  MobileOutlined, 
  MailOutlined 
} from '@ant-design/icons-vue'
import { reactive, ref } from 'vue'
import { message } from 'ant-design-vue'

export default {
  name: 'Profile',
  components: {
    CameraOutlined,
    LockOutlined,
    MobileOutlined,
    MailOutlined
  },
  setup() {
    const form = reactive({
      studentId: '2024001',
      name: '张三',
      role: localStorage.getItem('userRole') === 'teacher' ? '教师' : '学生',
      major: '软件工程',
      email: 'zhangsan@example.com',
      phone: '13800138000'
    })

    const passwordModal = ref(false)
    const confirmLoading = ref(false)
    const passwordForm = reactive({
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    })

    const fileInput = ref(null)
    const avatarUrl = ref('')

    const showChangePassword = () => {
      passwordModal.value = true
    }

    const handlePasswordChange = () => {
      confirmLoading.value = true
      setTimeout(() => {
        message.success('密码修改成功')
        passwordModal.value = false
        confirmLoading.value = false
      }, 1000)
    }

    const handleSave = () => {
      message.success('保存成功')
    }

    const handleUploadClick = () => {
      fileInput.value.click()
    }

    const handleFileChange = (e) => {
      const file = e.target.files[0]
      if (!file) return

      // 验证文件类型
      if (!file.type.startsWith('image/')) {
        message.error('请选择图片文件')
        return
      }

      // 验证文件大小（限制为 2MB）
      if (file.size > 2 * 1024 * 1024) {
        message.error('图片大小不能超过 2MB')
        return
      }

      // 创建预览 URL
      const reader = new FileReader()
      reader.onload = (e) => {
        avatarUrl.value = e.target.result
        message.success('头像上传成功')
      }
      reader.readAsDataURL(file)

      // 清空文件输入框，以便可以重复选择同一文件
      e.target.value = ''
    }

    return {
      form,
      passwordModal,
      confirmLoading,
      passwordForm,
      fileInput,
      avatarUrl,
      showChangePassword,
      handlePasswordChange,
      handleSave,
      handleUploadClick,
      handleFileChange
    }
  }
}
</script>

<style scoped>
.page-container {
  padding: 40px 24px;
  min-height: 100vh;
  background: #f0f2f5;
}

.header-card {
  max-width: 1400px;
  margin: 0 auto 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

:deep(.header-card .ant-card-body) {
  padding: 12px 24px;
}

.page-title {
  margin: 0;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.85);
}

.profile-container {
  max-width: 1400px;
  margin: 0 auto;
}

.card-row {
  width: 100%;
  padding: 0 40px;
}

.info-card, 
.detail-card {
  height: 360px;
  box-shadow: var(--shadow-1);
  border-radius: 12px;
  width: 100%;
  text-align: center;
}

.avatar-wrapper {
  position: relative;
  display: inline-block;
  margin: 0;
}

:deep(.ant-avatar) {
  position: relative;
  overflow: hidden;
}

.avatar-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-hover {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  border-radius: 60px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
  cursor: pointer;
}

.avatar-wrapper:hover .upload-hover {
  opacity: 1;
}

.user-info {
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-info h2 {
  margin-bottom: 2px;
  color: rgba(0, 0, 0, 0.85);
}

.user-info p {
  margin: 2px 0;
  color: rgba(0, 0, 0, 0.45);
}

.stats {
  display: flex;
  justify-content: space-around;
  padding: 4px;
  margin: 4px auto;
  background: #f8f9fa;
  border-radius: 8px;
  max-width: 90%;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: 500;
  color: var(--primary-color);
}

.stat-label {
  margin-top: 4px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

:deep(.ant-form-item) {
  margin-bottom: 8px !important;
}

:deep(.ant-form-item:last-child) {
  margin-top: auto;
  margin-bottom: 0;
  text-align: right;
}

:deep(.ant-modal .ant-form-item-label) {
  text-align: left;
}

:deep(.ant-modal .ant-input-password) {
  width: 100%;
}

:deep(.ant-avatar-string) {
  width: 100%;
  height: 100%;
  line-height: 120px;
}
</style>
